<template>
  <div>
    <p class="cinema-header">
      <van-icon name="arrow-left" size="18" color="#191a1b" @click="goBack" />
    </p>
    <div class="cinema-title">
      <van-nav-bar :title="cinema.name" z-index="99" :border="false" />
    </div>
    <div class="cinema-tag" v-if="cinema.services">
      <div v-show="showTag">
        <van-tag
          v-for="(item, index) in cinema.services"
          :key="index"
          plain
          :color="iconColor"
          :text-color="iconColor"
          size="medium"
          @click="showPhotos = true"
        >
          {{ item.name }}</van-tag
        >
        <van-tag plain color="#0000" :text-color="iconColor" size="medium">
          <van-icon name="arrow" :color="iconColor" />
        </van-tag>
      </div>
    </div>
    <van-nav-bar :title="cinema.address">
      <template #left>
        <van-icon name="location-o" size="18" color="#191a1b" />
      </template>
      <template #right>
        <van-icon name="phone-o" size="18" color="#191a1b" />
      </template>
    </van-nav-bar>
  </div>
</template>
  
<script>
export default {
  data() {
    return {
      cinema: {},
      iconColor: "#ffb232",
      showTag: true,
      showPhotos : false,
    };
  },
  created() {
    this.getCinemaDetail();
  },
  mounted() {
    window.addEventListener("scroll", this.handlerScroll);
  },
  methods: {
    // 获取影院详情
    async getCinemaDetail() {
      let res = await this.$api({
        headers: {
          "X-host": "mall.film-ticket.cinema.info",
        },
        url: "https://m.maizuo.com/gateway",
        method: "get",
        params: {
          cinemaId: this.$route.params.cinemaId,
          k: 5689571,
        },
      });
      this.cinema = res.data.data.cinema;
    },
    // 监听滚动事件，处理标签的隐藏
    handlerScroll() {
      this.showTag = window.pageYOffset < 50;
    },
    // 返回上一层
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>
  
  <style scoped>
.cinema-header {
  width: 100%;
  position: fixed;
  top: 0;
  line-height: 47px;
  padding-left: 16px;
  z-index: 99;
  background: #fff;
}
.cinema-title {
  margin-top: 47px;
  position: sticky;
  top: 0;
  background: #fff;
}
.cinema-tag {
  text-align: center;
  align-items: baseline;
  height: 38px;
}
.cinema-tag .van-tag {
  margin: 0 2px;
}
</style>